<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索栏 -->
    <van-search
      v-model="key"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- 历史记录区域 -->
    <!-- 输入框没内容 -->
    <van-cell-group v-if="key == ''">
      <van-cell title="历史记录" />
      <!-- 到时候根据保存历史记录的数组生成 -->
      <van-cell
        v-for="(item, index) in historyList"
        :key="index"
        :title="item"
        @click="$router.push(`/search/result?key=${item}`)"
      />
    </van-cell-group>

    <!-- 搜索建议区域 -->
    <van-cell-group v-else>
      <van-cell
        v-for="(item, index) in colorList"
        :key="index"
        icon="search"
      >
      <!-- 直接传item是带span标签 -->
      <!-- 所以要根据下标去原数组中找不带span标签 -->
        <div v-html="item" @click="$router.push(`/search/result?key=${suggestList[index]}`)"></div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
import { suggestAPI } from "@/api/search";
export default {
  data() {
    return {
      key: "",
      // 保存历史记录的数组
      historyList: JSON.parse(localStorage.getItem("history89")) || [],
      // 保存搜索建议的数组
      suggestList: [],
    };
  },

  methods: {
    onSearch() {
      // 非空判断
      if (this.key == "") return this.$toast("请输入搜索内容");

      // 先把输入的内容存到数组里
      if (this.historyList.indexOf(this.key) == -1) {
        this.historyList.unshift(this.key);
      }
      // 把数组保存到本地存储
      localStorage.setItem("history89", JSON.stringify(this.historyList));

      // 跳转到搜索结果页面
      this.$router.push({
        name: 'result',
        query: {
          key: this.key
        }
      })
    },

    // 一边输入一边触发的事件
    async onInput() {
      if (this.key != "") {
        // 一边输入就要一边发请求给服务器拿到搜索的建议
        const res = await suggestAPI({
          q: this.key,
        });

        // 因为这个接口的特点，如果搜不到会返回null
        // 所以最好判断一下标0不为null才赋值
        if (res.data.options[0]) {
          // 把整个数组赋值给suggestList
          this.suggestList = res.data.options;
        } else {
          // 代表服务器没返回内容，那就给空数组
          this.suggestList = [];
        }
      }
    },
  },

  computed: {
    // 得到一个带颜色的新数组
    colorList () {

      // 根据得到的搜索建议旧数组进行遍历，得到一个长度一样的数组
      return this.suggestList.map( v => {
        // v就是每条建议
        return v.replaceAll( this.key, `<span style="color:red;">${this.key}</span>` )
      })
    }
  }
};
</script>

<style>
</style>